<div class="panel panel-default">
    <div class="panel-heading primary">
        <div class="panel-title">
            Details
        </div>
    </div>
    <div class="panel-body">
        <div class="alert alert-danger" data-ng-show="errors.message">
            {{errors.message}}
        </div>
        <form class="form-horizontal">
            <div class="form-group" ng-class="{'has-error' : errors.name}">
                <label class="col-sm-3 control-label">Name
                    <br><em>
                        <small class="help-block">required</small>
                    </em></label>
                <div class="col-sm-8">
                    <input ng-model="upstream.name" class="form-control">
                    <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
                    <p class="help-block">
                        This is a hostname like name that can be referenced in an <code>upstream_url</code> field of an
                        <code>api</code>.
                    </p>

                </div>
            </div>
            <div class="form-group" ng-class="{'has-error' : errors.slots}">
                <label class="col-sm-3 control-label">Slots
                    <br><em>
                        <small class="help-block">optional</small>
                    </em></label>
                <div class="col-sm-8">
                    <input type="number" ng-model="upstream.slots" class="form-control">
                    <div class="text-danger" ng-if="errors.slots" data-ng-bind="errors.slots"></div>
                    <p class="help-block">
                        The number of slots in the loadbalancer algorithm (<code>10-65536</code>, defaults to
                        <code>1000</code>).
                    </p>

                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors.hash_on}">
                <label class="col-sm-3 control-label">Hash on
                    <br><em>
                        <small class="help-block">optional</small>
                    </em></label>
                <div class="col-sm-8">
                    <select ng-model="upstream.hash_on" class="form-control">
                        <option value="none">none</option>
                        <option value="consumer">consumer</option>
                        <option value="ip">ip</option>
                        <option value="header">header</option>
                    </select>
                    <div class="text-danger" ng-if="errors.hash_on" data-ng-bind="errors.hash_on"></div>
                    <p class="help-block">
                        What to use as hashing input: <code>none</code>, <code>consumer</code>, <code>ip</code>, or <code>header</code> (defaults to <code>none</code> resulting in a weighted-round-robin scheme).
                    </p>
                </div>
            </div>
            <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors.hash_fallback}">
                <label class="col-sm-3 control-label">Hash fallback
                    <br><em>
                        <small class="help-block">optional</small>
                    </em></label>
                <div class="col-sm-8">
                    <select ng-model="upstream.hash_fallback" class="form-control">
                        <option value="none">none</option>
                        <option value="consumer">consumer</option>
                        <option value="ip">ip</option>
                        <option value="header">header</option>
                    </select>
                    <div class="text-danger" ng-if="errors.hash_fallback" data-ng-bind="errors.hash_fallback"></div>
                    <p class="help-block">
                        What to use as hashing input if the primary <code>hash_on</code> does not return a hash (eg. header is missing, or no consumer identified)
                    </p>
                </div>
            </div>

            <!-- ACTIVE HEALTH CHECKS -->
            <div class="col col-12 margin-bottom padding clickable" style="background-color: #eaeaea" ng-click="showActiveHealthChecks = !showActiveHealthChecks">
                <h5 class="no-margin no-padding">
                    Active health checks
                    <i class="mdi pull-right" ng-class="{'mdi-chevron-down': !showActiveHealthChecks,'mdi-chevron-up': showActiveHealthChecks,}"></i>
                </h5>
            </div>
            <div ng-show="showActiveHealthChecks">
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.timeout']}">
                    <label class="col-sm-3 control-label">Active healthchecks timeout
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.timeout" class="form-control">
                        <div class="text-danger" ng-if="errors.healthchecks.active.timeout" data-ng-bind="errors.healthchecks.active.timeout"></div>
                        <p class="help-block">
                            The connection timeout limit for the HTTP GET request of the probe. The default value is 1 second.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.concurrency']}">
                    <label class="col-sm-3 control-label">Active healthchecks concurrency
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.concurrency" class="form-control">
                        <div class="text-danger" ng-if="errors.healthchecks.active.concurrency" data-ng-bind="errors.healthchecks.active.concurrency"></div>
                        <p class="help-block">
                            Number of targets to check concurrently in active health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.http_path']}">
                    <label class="col-sm-3 control-label">Active healthchecks HTTP path
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input ng-model="upstream.healthchecks.active.http_path" class="form-control">
                        <div class="text-danger" ng-if="errors.healthchecks.active.http_path" data-ng-bind="errors.healthchecks.active.http_path"></div>
                        <p class="help-block">
                            The path that should be used when issuing the HTTP GET request to the target. The default value is <code>/</code>.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.interval']}">
                    <label class="col-sm-3 control-label">Active healthchecks healthy interval
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.healthy.interval" class="form-control">
                        <div class="text-danger" ng-if="errors.healthchecks.active.healthy.interval" data-ng-bind="errors.healthchecks.active.healthy.interval"></div>
                        <p class="help-block">
                            Interval between active health checks for healthy targets (in seconds). A value of zero indicates that active probes for
                            healthy targets should not be performed.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.http_statuses']}">
                    <label class="col-sm-3 control-label">Active healthchecks healthy http statuses
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <chips ng-model="upstream.healthchecks.active.healthy.http_statuses">
                            <chip-tmpl>
                                <div class="default-chip">
                                    {{chip}}
                                    <i class="mdi mdi-close" remove-chip></i>
                                </div>
                            </chip-tmpl>
                            <input chip-control/>
                        </chips>
                        <div class="text-danger" ng-if="errors['healthchecks.active.healthy.http_statuses']" data-ng-bind="errors['healthchecks.active.healthy.http_statuses']"></div>
                        <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                        <p class="help-block">
                            An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.healthy.successes']}">
                    <label class="col-sm-3 control-label">Active healthchecks healthy successes
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.healthy.successes" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.active.healthy.successes']" data-ng-bind="errors['healthchecks.active.healthy.successes']"></div>
                        <p class="help-block">
                            Number of successes in active probes (as defined by <code>healthchecks.active.healthy.http_statuses</code>) to consider a target healthy.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.interval']}">
                    <label class="col-sm-3 control-label">Active healthchecks unhealthy interval
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.unhealthy.interval" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.interval']" data-ng-bind="errors['healthchecks.active.unhealthy.interval']"></div>
                        <p class="help-block">
                            Interval between active health checks for healthy targets (in seconds). A value of zero indicates that active probes for
                            healthy targets should not be performed.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.http_statuses']}">
                    <label class="col-sm-3 control-label">Active healthchecks unhealthy http statuses
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <chips ng-model="upstream.healthchecks.active.unhealthy.http_statuses">
                            <chip-tmpl>
                                <div class="default-chip">
                                    {{chip}}
                                    <i class="mdi mdi-close" remove-chip></i>
                                </div>
                            </chip-tmpl>
                            <input chip-control/>
                        </chips>
                        <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.http_statuses']" data-ng-bind="errors['healthchecks.active.unhealthy.http_statuses']"></div>
                        <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                        <p class="help-block">
                            An array of HTTP statuses to consider a success, indicating healthiness, when returned by a probe in active health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.tcp_failures']}">
                    <label class="col-sm-3 control-label">Active healthchecks unhealthy TCP failures
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.unhealthy.tcp_failures" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.active.unhealthy.tcp_failures']"></div>
                        <p class="help-block">
                            Number of TCP failures in active probes to consider a target unhealthy.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.timeouts']}">
                    <label class="col-sm-3 control-label">Active healthchecks unhealthy timeouts
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.unhealthy.timeouts" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.timeouts']" data-ng-bind="errors['healthchecks.active.unhealthy.timeouts']"></div>
                        <p class="help-block">
                            Number of timeouts in active probes to consider a target unhealthy.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.active.unhealthy.http_failures']}">
                    <label class="col-sm-3 control-label">Active healthchecks unhealthy HTTP failures
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.active.unhealthy.http_failures" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.active.unhealthy.http_failures']" data-ng-bind="errors['healthchecks.active.unhealthy.http_failures']"></div>
                        <p class="help-block">
                            Number of HTTP failures in active probes (as defined by <code>healthchecks.active.unhealthy.http_statuses</code>) to consider a target
                            unhealthy.
                        </p>

                    </div>
                </div>
            </div>
            <!-- END ACTIVE HEALTHCHECKS -->


            <!-- PASSIVE HEALTH CHECKS -->
            <div class="col col-12 margin-bottom padding clickable" style="background-color: #eaeaea" ng-click="showPassiveHealthChecks = !showPassiveHealthChecks">
                <h5 class="no-margin no-padding">
                    Passive health checks
                    <i class="mdi pull-right" ng-class="{'mdi-chevron-down': !showPassiveHealthChecks,'mdi-chevron-up': showPassiveHealthChecks,}"></i>
                </h5>
            </div>
            <div ng-show="showPassiveHealthChecks">
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.healthy.http_statuses']}">
                    <label class="col-sm-3 control-label">Passive healthchecks healthy http statuses
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <chips ng-model="upstream.healthchecks.passive.healthy.http_statuses">
                            <chip-tmpl>
                                <div class="default-chip">
                                    {{chip}}
                                    <i class="mdi mdi-close" remove-chip></i>
                                </div>
                            </chip-tmpl>
                            <input chip-control/>
                        </chips>
                        <div class="text-danger" ng-if="errors['healthchecks.passive.healthy.http_statuses']" data-ng-bind="errors['healthchecks.passive.healthy.http_statuses']"></div>
                        <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                        <p class="help-block">
                            An array of HTTP statuses which represent healthiness when produced by proxied traffic, as observed by passive health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.healthy.successes']}">
                    <label class="col-sm-3 control-label">Passive healthchecks healthy successes
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.passive.healthy.successes" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.passive.healthy.successes']" data-ng-bind="errors['healthchecks.passive.healthy.successes']"></div>
                        <p class="help-block">
                            Number of successes in passive probes (as defined by <code>healthchecks.passive.healthy.http_statuses</code>) to consider a target healthy.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.tcp_failures']}">
                    <label class="col-sm-3 control-label">Passive healthchecks unhealthy TCP failures
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.tcp_failures" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.tcp_failures']"></div>
                        <p class="help-block">
                            Number of TCP failures in passive probes to consider a target unhealthy.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.http_statuses']}">
                    <label class="col-sm-3 control-label">Passive healthchecks unhealthy http statuses
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <chips ng-model="upstream.healthchecks.passive.unhealthy.http_statuses">
                            <chip-tmpl>
                                <div class="default-chip">
                                    {{chip}}
                                    <i class="mdi mdi-close" remove-chip></i>
                                </div>
                            </chip-tmpl>
                            <input chip-control/>
                        </chips>
                        <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.http_statuses']" data-ng-bind="errors['healthchecks.passive.unhealthy.http_statuses']"></div>
                        <p class="help-block">Tip: Press <code>Enter</code> to accept a value.</p>
                        <p class="help-block">
                            An array of HTTP statuses which represent unhealthiness when produced by proxied traffic, as observed by passive health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.tcp_failures']}">
                    <label class="col-sm-3 control-label">Passive healthchecks unhealthy TCP failures
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.tcp_failures" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.tcp_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.tcp_failures']"></div>
                        <p class="help-block">
                            Number of TCP failures in proxied traffic to consider a target unhealthy, as observed by passive health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.timeouts']}">
                    <label class="col-sm-3 control-label">Passive healthchecks unhealthy timeouts
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input type="number" ng-model="upstream.healthchecks.passive.unhealthy.timeouts" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.timeouts']" data-ng-bind="errors['healthchecks.passive.unhealthy.timeouts']"></div>
                        <p class="help-block">
                            Number of timeouts in proxied traffic to consider a target unhealthy, as observed by passive health checks.
                        </p>

                    </div>
                </div>
                <div class="form-group" ng-if="compareKongVersion('0.12.0') >= 0" ng-class="{'has-error' : errors['healthchecks.passive.unhealthy.http_failures']}">
                    <label class="col-sm-3 control-label">Passive healthchecks unhealthy HTTP failures
                        <br>
                        <em>
                            <small class="help-block">optional</small>
                        </em>
                    </label>
                    <div class="col-sm-8">
                        <input ng-model="upstream.healthchecks.passive.unhealthy.http_failures" class="form-control">
                        <div class="text-danger" ng-if="errors['healthchecks.passive.unhealthy.http_failures']" data-ng-bind="errors['healthchecks.passive.unhealthy.http_failures']"></div>
                        <p class="help-block">
                            Number of HTTP failures in passive probes (as defined by <code>healthchecks.passive.unhealthy.http_statuses</code>)
                            to consider a target unhealthy, as observed by passive health checks.
                        </p>

                    </div>
                </div>
            </div>
            <!-- END PASSIVE HEALTHCHECKS -->


            <div class="form-group"
                 ng-if="compareKongVersion('0.12.0') < 0"
                 ng-class="{'has-error' : errors.orderlist}">
                <label class="col-sm-3 control-label">Orderlist
                    <br><em>
                        <small class="help-block">optional</small>
                    </em></label>
                <div class="col-sm-8">
                    <chips ng-model="upstream.orderlist">
                        <chip-tmpl>
                            <div class="default-chip">
                                {{chip}}
                                <i class="mdi mdi-close" remove-chip></i>
                            </div>
                        </chip-tmpl>
                        <input chip-control/>
                    </chips>
                    <div class="text-danger" ng-if="errors.orderlist" data-ng-bind="errors.orderlist"></div>
                    <p class="help-block">
                        A list of sequential, but randomly ordered, integer numbers that determine the distribution of
                        the slots in the balancer. If omitted it will be generated. If given, it must have exactly
                        <code>slots</code> number of entries.
                    </p>

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-8">
                    <button type="submit" class="btn btn-primary" ng-click="submit()">
                        <i class="mdi mdi-check"></i>
                        Submit Changes
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>
